<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>任务管理</el-breadcrumb-item>
      <el-breadcrumb-item>次级账号任务详情</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input
            placeholder="请输入内容"
            v-model="queryInfo.query"
            clearable="true"
            @clear="likeClear()"
          >
            <el-button slot="append" icon="el-icon-search" @click="getChildList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addTaskVisible = true">新增任务</el-button>
        </el-col>
      </el-row>
      <!-- 用户列表区域 -->
      <el-table :data="userlist" border stripe>
        <!-- stripe: 斑马条纹
        border：边框-->
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="user.username" label="账号名"></el-table-column>
        <el-table-column prop="user.name" label="用户名"></el-table-column>
        <el-table-column prop="levelNum" label="等级"></el-table-column>
        <el-table-column prop="user.money" label="金钱"></el-table-column>
        <el-table-column prop="accomplishCount" label="已完成任务数"></el-table-column>
        <el-table-column prop="abandonCount" label="放弃任务数"></el-table-column>
        <el-table-column prop="auditCount" label="待审核任务数"></el-table-column>
        <el-table-column prop="unfinishedCount" label="未完成任务数"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="审核列表"
              :enterable="false"
              placement="top"
            >
              <el-button
                type="success"
                @click="getAuditTaskList(scope.row.user.id)"
                circle
                size="mini"
              >
                <span class="iconfont icon-shuangshen" style="font-size: 13px "></span>
              </el-button>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              content="情况分析图"
              :enterable="false"
              placement="top"
            >
              <el-button
                type="primary"
                circle
                size="mini"
                @click="getWithinTaskInfo(scope.row.user.id)"
              >
                <span class="iconfont icon-zhuxingtu2" style="font-size: 14px "></span>
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 账号的分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[2, 5, 10, 15]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <!-- 折线图的弹窗 -->
    <el-dialog
      title="7天内任务完成情况"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      class="card-style"
      @open="renderer()"
    >
      <div id="main" class="siggle-chart"></div>
    </el-dialog>

    <!-- 审核列表的弹窗 -->
    <el-dialog title="待审核列表" :visible.sync="auditDialogVisible" width="70%">
      <el-card style="width:100%">
        <el-table :data="auditTaskList" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="任务名称">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="任务类型">
                  <span>{{ props.row.typeClassify==1?'日常任务':'一次性任务' }}</span>
                </el-form-item>
                <el-form-item label="任务介绍">
                  <span>{{ props.row.introduce }}</span>
                </el-form-item>
                <el-form-item label="确认方式">
                  <span>{{ props.row.accomplishType==1?'主账号确认':'次级账号确认' }}</span>
                </el-form-item>
                <el-form-item label="需求等级">
                  <span>{{ props.row.prepositionLevel }}</span>
                </el-form-item>
                <el-form-item label="经验奖励">
                  <span>{{ props.row.awardLevel }}</span>
                </el-form-item>
                <el-form-item label="金币奖励">
                  <span>{{ props.row.awardMoney }}</span>
                </el-form-item>
                <el-form-item label="经验惩罚">
                  <span>{{ props.row.punishmentLevel }}</span>
                </el-form-item>
                <el-form-item label="金币惩罚">
                  <span>{{ props.row.punishmentMoney }}</span>
                </el-form-item>
                <el-form-item label="任务限时" v-if="props.row.limitTime!=null">
                  <span>{{ props.row.limitTime }}小时</span>
                </el-form-item>
                <el-form-item label="接取时间">
                  <span>{{props.row.receiveCreateTime }}</span>
                </el-form-item>
                <el-form-item label="完成时间">
                  <span>{{props.row.receiveFinishTime}}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="任务名称" prop="name"></el-table-column>
          <el-table-column label="任务类型">
            <template slot-scope="pro">
              <span>{{pro.row.typeClassify==1?'日常任务':'一次性任务'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="pro">
              <el-button
                type="primary"
                @click="finishTask(pro.row.utId,pro.row.id,1)"
                width="20px"
              >确认完成</el-button>
              <el-button
                type="warning"
                @click="finishTask(pro.row.utId,pro.row.id,2)"
                width="20px"
              >拒绝完成</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->

        <el-pagination
          @size-change="auditHandleSizeChange"
          @current-change="auditHandleCurrentChange"
          :current-page="auditInfo.pageNum"
          :page-sizes="[2, 5, 10]"
          :page-size="auditInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="auditInfo.total"
        ></el-pagination>
      </el-card>
    </el-dialog>
    <!-- 文件视图 -->
    <el-dialog title="文件" :visible.sync="fileDialogVisible" width="50%">
      <el-card :body-style="{ padding: '0px' }">
      <img src=filepath class="image">
      <div style="padding: 14px;">
        <span>好吃的汉堡</span>
        <div class="bottom clearfix">
          <time class="time">{{ currentDate }}</time>
          <el-button type="text" class="button">操作按钮</el-button>
        </div>
      </div>
    </el-card>
    </el-dialog>
  </div>
</template>

<style lang="postcss" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.card-style {
  height: 680px;
  width: 100%;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 40px;
}
.siggle-chart {
  /* width: 700px; */
  height: 520px;
  margin: auto;
  padding-right: 20px;
}
</style>


<script>
import {
  auditSecondaryTask,
  getWithinTaskInfo,
  getAuditTaskList,
  supervisorGetSecondaryListTaskInfo,
} from "@/utils/SupervisorApi";
const echarts = require("echarts");
export default {
  data() {
    return {
      filePath: "",
      fileDialogVisible: false,
      auditTaskList: [],
      //审核列表弹窗
      auditDialogVisible: false,
      //对话框
      withinTaskInfo: [],
      dialogVisible: false,
      auditInfo: {
        query: "",
        // 当前页数
        pageNum: 1,
        // 每页显示多少数据
        pageSize: 5,
        id: 0,
        total: 0,
      },
      queryInfo: {
        query: "",
        // 当前页数
        pageNum: 1,
        // 每页显示多少数据
        pageSize: 5,
      },
      userlist: [],
      total: 0,
      // ec
      ec: {
        finishTimeList: [],
        accomplishCountList: [],
        abandonCountList: [],
      },
    };
  },
  created() {
    this.getChildList();
  },

  methods: {
    isReceive(flag) {
      return flag == 1;
    },
    async finishTask(utId, taskId, isAccomplish) {
      const { data: res } = await auditSecondaryTask({
        id: utId,
        taskId: taskId,
        isAccomplish: isAccomplish,
      });
      if (res.meta.status !== 200) {
        return this.$message.error("完成任务请求失败");
      } else {
        this.$message({
          message: "任务已完成",
          type: "success",
        });
      }
      this.getAuditTaskList(this.auditInfo.id);
    },
    renderer() {
      this.$nextTick(() => {
        var myChart = echarts.init(document.getElementById("main"));
        // 绘制图表
        myChart.setOption({
          title: {
            text: "",
          },
          // 数据节点总结
          tooltip: {
            trigger: "axis",
          },
          //大小调整
          grid: {
            bottom: 150,
            top: 10,
            right: 80,
            left: 50,
            height: 300,
          },
          //头部的可选数据线
          legend: {
            top: 10,
            // bottom: 20,
            // right: 0,
            data: ["已完成", "放弃"],
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              data: this.ec.finishTimeList,
              axisLabel: {
                interval: 0,
                rotate: -50,
              },
            },
          ],
          //可能和节点有关
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              radius: "95%",
              name: "已完成",
              type: "line",
              data: this.ec.accomplishCountList,
            },
            {
              radius: "95%",
              name: "放弃",
              type: "line",
              data: this.ec.abandonCountList,
            },
          ],
        });
        console.log(this.ec.accomplishCountList);
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    likeClear() {
      this.queryInfo.query = "";
      this.getChildList();
    },
    async getWithinTaskInfo(id) {
      console.log(id);
      const { data: res } = await getWithinTaskInfo({
        id: id,
        day: 7,
      });
      if (res.data.length <= 0) {
        this.$message.error("该账号暂无任务数据可以显示");
        return;
      }
      this.ec.finishTimeList = this.accomplishCountList = this.abandonCountList = [];
      for (let i = 0; i < res.data.length; i++) {
        this.ec.finishTimeList = [
          ...this.ec.finishTimeList,
          new Date(
            new Date(new Date(res.data[i].finishTime).toJSON()) +
              8 * 3600 * 1000
          )
            .toISOString()
            .replace(/T/g, " ")
            .replace(/\.[\d]{3}Z/, ""),
        ];
        this.ec.accomplishCountList = [
          ...this.ec.accomplishCountList,
          res.data[i].accomplishCount,
        ];
        this.ec.abandonCountList = [
          ...this.ec.abandonCountList,
          res.data[i].abandonCount,
        ];
      }
      console.log(this.ec.abandonCountList);
      if (res.meta.status !== 200) {
        return this.$message.error("获取失败");
      }
      this.withinTaskInfo = res.data;
      this.dialogVisible = true;
    },
    async getAuditTaskList(id) {
      this.auditInfo.id = id;
      const { data: res } = await getAuditTaskList(this.auditInfo);
      console.log(res);
      if (res.meta.status !== 200) {
        return this.$message.error("获取审核列表失败！");
      }
      this.auditTaskList = res.data.list;
      console.log(this.auditTaskList);
      this.auditDialogVisible = true;
      this.auditInfo.total = res.data.total;
    },
    async getChildList() {
      const { data: res } = await supervisorGetSecondaryListTaskInfo(
        this.queryInfo
      );
      console.log(res);
      if (res.meta.status !== 200) {
        return this.$message.error("获取用户列表失败！");
      }
      this.userlist = res.data.list;
      this.total = res.data.total;
    },
    handleSizeChange(newSize) {
      console.log(newSize);
      this.queryInfo.pageSize = newSize;
      this.queryInfo.pageNum = 1;
      this.getChildList();
    },
    // 监听 页码值 改变事件
    handleCurrentChange(newSize) {
      // console.log(newSize)
      this.queryInfo.pageNum = newSize;
      this.getChildList();
    },

    auditHandleSizeChange(newSize) {
      this.auditInfo.pageSize = newSize;
      this.auditInfo.pageNum = 1;
      this.getAuditTaskList(this.auditInfo.id);
    },
    // 监听 页码值 改变事件
    auditHandleCurrentChange(newSize) {
      this.auditInfo.pageNum = newSize;
      this.getAuditTaskList(this.auditInfo.id);
    },
  },
};
</script>